<template>
  <div class="bg-white rounded-lg shadow-md p-6">
    <div class="flex justify-between items-center mb-6">
      <h3 class="text-xl font-semibold text-gray-800">创建广告创意</h3>
      <div>
        <button type="button" class="px-4 py-2 text-gray-600 hover:text-primary transition-colors">
          <i class="fa fa-question-circle mr-1"></i>帮助
        </button>
      </div>
    </div>
    
    <form @submit.prevent="submitCreative">
      <!-- 基础信息 -->
      <div class="mb-6">
        <h4 class="text-lg font-medium text-gray-700 mb-4 flex items-center">
          <span class="w-5 h-5 rounded-full bg-primary flex items-center justify-center mr-2">
            <span class="text-white text-xs">1</span>
          </span>
          基础信息
        </h4>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="creativeName" class="block text-sm font-medium text-gray-700 mb-1">创意名称 <span class="text-danger">*</span></label>
            <input type="text" id="creativeName" v-model="creativeForm.name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors" placeholder="请输入创意名称">
          </div>
          
          <div>
            <label for="adgroupId" class="block text-sm font-medium text-gray-700 mb-1">所属广告组 <span class="text-danger">*</span></label>
            <div class="relative">
              <select id="adgroupId" v-model="creativeForm.adGroupId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors appearance-none">
                <option value="">请选择广告组</option>
                <option v-for="group in adGroups" :key="group.id" :value="group.id">{{ group.name }}</option>
              </select>
              <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                <i class="fa fa-chevron-down text-xs"></i>
              </div>
            </div>
          </div>
          
          <div>
            <label for="creativeType" class="block text-sm font-medium text-gray-700 mb-1">创意类型 <span class="text-danger">*</span></label>
            <div class="relative">
              <select id="creativeType" v-model="creativeForm.type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors appearance-none">
                <option value="">请选择创意类型</option>
                <option value="image">图片广告</option>
                <option value="video">视频广告</option>
                <option value="text">文字链广告</option>
                <option value="app">应用下载广告</option>
              </select>
              <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                <i class="fa fa-chevron-down text-xs"></i>
              </div>
            </div>
          </div>
          
          <div>
            <label for="landingPage" class="block text-sm font-medium text-gray-700 mb-1">落地页类型 <span class="text-danger">*</span></label>
            <div class="relative">
              <select id="landingPage" v-model="creativeForm.landingPageType" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors appearance-none">
                <option value="">请选择落地页类型</option>
                <option value="website">网站链接</option>
                <option value="miniProgram">小程序</option>
                <option value="app">应用下载</option>
                <option value="nativePage">原生页</option>
              </select>
              <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                <i class="fa fa-chevron-down text-xs"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 素材设置 -->
      <div class="mb-6">
        <h4 class="text-lg font-medium text-gray-700 mb-4 flex items-center">
          <span class="w-5 h-5 rounded-full bg-primary flex items-center justify-center mr-2">
            <span class="text-white text-xs">2</span>
          </span>
          素材设置
        </h4>
        
        <!-- 图片广告素材 -->
        <div v-if="creativeForm.type === 'image'" class="space-y-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">主图 <span class="text-danger">*</span></label>
            <div class="flex items-center space-x-4">
              <div class="w-32 h-32 border-2 border-dashed border-gray-300 rounded-md flex items-center justify-center cursor-pointer hover:border-primary transition-colors">
                <div class="text-center">
                  <i class="fa fa-upload text-2xl text-gray-400 mb-1"></i>
                  <p class="text-xs text-gray-500">点击上传</p>
                </div>
                <input type="file" class="hidden" ref="mainImageUpload" @change="handleImageUpload">
              </div>
              
              <div v-if="creativeForm.mainImageUrl" class="w-32 h-32 rounded-md overflow-hidden">
                <img :src="creativeForm.mainImageUrl" alt="主图预览" class="w-full h-full object-cover">
              </div>
              
              <div class="text-sm text-gray-500">
                <p>支持JPG、PNG格式</p>
                <p>建议尺寸：1200×628px</p>
                <p>大小不超过5MB</p>
              </div>
            </div>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">创意标题 <span class="text-danger">*</span></label>
            <input type="text" v-model="creativeForm.title" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors" placeholder="请输入创意标题">
            <p class="text-xs text-gray-500 mt-1">建议20个字符以内，突出卖点</p>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">创意描述 <span class="text-danger">*</span></label>
            <textarea v-model="creativeForm.description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors" placeholder="请输入创意描述"></textarea>
            <p class="text-xs text-gray-500 mt-1">建议30个字符以内，说明产品优势</p>
          </div>
        </div>
        
        <!-- 视频广告素材 -->
        <div v-else-if="creativeForm.type === 'video'" class="space-y-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">视频素材 <span class="text-danger">*</span></label>
            <div class="flex items-center space-x-4">
              <div class="w-48 h-27 border-2 border-dashed border-gray-300 rounded-md flex items-center justify-center cursor-pointer hover:border-primary transition-colors">
                <div class="text-center">
                  <i class="fa fa-file-video-o text-3xl text-gray-400 mb-1"></i>
                  <p class="text-xs text-gray-500">点击上传视频</p>
                </div>
                <input type="file" class="hidden" ref="videoUpload" @change="handleVideoUpload">
              </div>
              
              <div v-if="creativeForm.videoUrl" class="w-48 h-27 rounded-md overflow-hidden bg-black">
                <video :src="creativeForm.videoUrl" controls class="w-full h-full object-contain"></video>
              </div>
              
              <div class="text-sm text-gray-500">
                <p>支持MP4、MOV格式</p>
                <p>时长建议5-15秒</p>
                <p>大小不超过100MB</p>
              </div>
            </div>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">视频封面 <span class="text-danger">*</span></label>
            <div class="flex items-center space-x-4">
              <div class="w-32 h-18 border-2 border-dashed border-gray-300 rounded-md flex items-center justify-center cursor-pointer hover:border-primary transition-colors">
                <div class="text-center">
                  <i class="fa fa-image text-2xl text-gray-400 mb-1"></i>
                  <p class="text-xs text-gray-500">点击上传封面</p>
                </div>
                <input type="file" class="hidden" ref="coverImageUpload" @change="handleCoverImageUpload">
              </div>
              
              <div v-if="creativeForm.coverImageUrl" class="w-32 h-18 rounded-md overflow-hidden">
                <img :src="creativeForm.coverImageUrl" alt="视频封面预览" class="w-full h-full object-cover">
              </div>
            </div>
          </div>
        </div>
        
        <!-- 文字链广告素材 -->
        <div v-else-if="creativeForm.type === 'text'" class="space-y-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">标题 <span class="text-danger">*</span></label>
            <input type="text" v-model="creativeForm.title" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors" placeholder="请输入广告标题">
            <p class="text-xs text-gray-500 mt-1">建议15个字符以内</p>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">描述 <span class="text-danger">*</span></label>
            <textarea v-model="creativeForm.description" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors" placeholder="请输入广告描述"></textarea>
            <p class="text-xs text-gray-500 mt-1">建议30个字符以内</p>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">显示URL <span class="text-danger">*</span></label>
            <input type="text" v-model="creativeForm.displayUrl" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors" placeholder="例如：www.qq.com">
          </div>
        </div>
      </div>
      
      <!-- 投放设置 -->
      <div class="mb-6">
        <h4 class="text-lg font-medium text-gray-700 mb-4 flex items-center">
          <span class="w-5 h-5 rounded-full bg-primary flex items-center justify-center mr-2">
            <span class="text-white text-xs">3</span>
          </span>
          投放设置
        </h4>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="bidAmount" class="block text-sm font-medium text-gray-700 mb-1">出价金额(元) <span class="text-danger">*</span></label>
            <input type="number" id="bidAmount" v-model="creativeForm.bidAmount" min="0.01" step="0.01" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors" placeholder="请输入出价金额">
          </div>
          
          <div>
            <label for="dailyBudget" class="block text-sm font-medium text-gray-700 mb-1">每日预算(元) <span class="text-danger">*</span></label>
            <div class="flex items-center">
              <input type="number" id="dailyBudget" v-model="creativeForm.dailyBudget" min="100" step="1" class="w-full px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors" placeholder="请输入每日预算">
              <span class="px-3 py-2 bg-gray-100 border border-l-0 border-gray-300 rounded-r-md text-gray-700">元</span>
            </div>
          </div>
          
          <div>
            <label for="startDate" class="block text-sm font-medium text-gray-700 mb-1">开始日期 <span class="text-danger">*</span></label>
            <input type="date" id="startDate" v-model="creativeForm.startDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors">
          </div>
          
          <div>
            <label for="endDate" class="block text-sm font-medium text-gray-700 mb-1">结束日期</label>
            <input type="date" id="endDate" v-model="creativeForm.endDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors">
            <p class="text-xs text-gray-500 mt-1">不填写则为长期投放</p>
          </div>
        </div>
      </div>
      
      <!-- 定向设置 -->
      <div class="mb-6">
        <h4 class="text-lg font-medium text-gray-700 mb-4 flex items-center">
          <span class="w-5 h-5 rounded-full bg-primary flex items-center justify-center mr-2">
            <span class="text-white text-xs">4</span>
          </span>
          定向设置
        </h4>
        
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">地域定向</label>
            <div class="flex flex-wrap gap-2">
              <button type="button" class="px-3 py-1 bg-primary text-white rounded-full text-sm">全部地域</button>
              <button type="button" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full text-sm transition-colors">自定义</button>
            </div>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">年龄定向</label>
            <div class="flex flex-wrap gap-2">
              <button type="button" class="px-3 py-1 bg-primary text-white rounded-full text-sm">全部年龄</button>
              <button type="button" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full text-sm transition-colors">18-24岁</button>
              <button type="button" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full text-sm transition-colors">25-30岁</button>
              <button type="button" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full text-sm transition-colors">31-35岁</button>
              <button type="button" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full text-sm transition-colors">36-40岁</button>
              <button type="button" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full text-sm transition-colors">40岁以上</button>
            </div>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">性别定向</label>
            <div class="flex flex-wrap gap-2">
              <button type="button" class="px-3 py-1 bg-primary text-white rounded-full text-sm">全部性别</button>
              <button type="button" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full text-sm transition-colors">男</button>
              <button type="button" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full text-sm transition-colors">女</button>
            </div>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">兴趣定向</label>
            <div class="relative">
              <input type="text" placeholder="搜索兴趣标签" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors pl-9">
              <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
            <div class="mt-3 grid grid-cols-2 md:grid-cols-4 gap-2">
              <div class="bg-gray-50 p-2 rounded border border-gray-200">
                <p class="font-medium text-sm">游戏</p>
                <div class="flex flex-wrap gap-1 mt-1">
                  <span class="px-2 py-0.5 bg-gray-100 rounded text-xs">角色扮演</span>
                  <span class="px-2 py-0.5 bg-gray-100 rounded text-xs">休闲益智</span>
                </div>
              </div>
              <div class="bg-gray-50 p-2 rounded border border-gray-200">
                <p class="font-medium text-sm">电商</p>
                <div class="flex flex-wrap gap-1 mt-1">
                  <span class="px-2 py-0.5 bg-gray-100 rounded text-xs">服饰鞋包</span>
                  <span class="px-2 py-0.5 bg-gray-100 rounded text-xs">美妆个护</span>
                </div>
              </div>
              <div class="bg-gray-50 p-2 rounded border border-gray-200">
                <p class="font-medium text-sm">教育</p>
                <div class="flex flex-wrap gap-1 mt-1">
                  <span class="px-2 py-0.5 bg-gray-100 rounded text-xs">职业培训</span>
                  <span class="px-2 py-0.5 bg-gray-100 rounded text-xs">语言学习</span>
                </div>
              </div>
              <div class="bg-gray-50 p-2 rounded border border-gray-200">
                <p class="font-medium text-sm">生活</p>
                <div class="flex flex-wrap gap-1 mt-1">
                  <span class="px-2 py-0.5 bg-gray-100 rounded text-xs">美食</span>
                  <span class="px-2 py-0.5 bg-gray-100 rounded text-xs">旅游</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 预览和提交 -->
      <div class="flex justify-end space-x-3 pt-6 border-t border-gray-200">
        <button type="button" class="px-5 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">
          保存草稿
        </button>
        <button type="button" class="px-5 py-2 bg-white border border-primary text-primary rounded-md hover:bg-primary/5 transition-colors">
          预览
        </button>
        <button type="submit" class="px-5 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
          提交审核
        </button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'AdCreativeForm',
  data() {
    return {
      creativeForm: {
        name: '',
        adGroupId: '',
        type: '',
        landingPageType: '',
        title: '',
        description: '',
        mainImageUrl: '',
        videoUrl: '',
        coverImageUrl: '',
        displayUrl: '',
        bidAmount: 0.01,
        dailyBudget: 100,
        startDate: new Date().toISOString().split('T')[0],
        endDate: '',
      },
      adGroups: [
        { id: 1, name: '夏季促销活动' },
        { id: 2, name: '新品上市推广' },
        { id: 3, name: '品牌形象宣传' },
        { id: 4, name: 'APP下载推广' },
      ]
    }
  },
  methods: {
    handleImageUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.creativeForm.mainImageUrl = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    },
    
    handleVideoUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.creativeForm.videoUrl = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    },
    
    handleCoverImageUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.creativeForm.coverImageUrl = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    },
    
    submitCreative() {
      // 表单验证
      if (!this.creativeForm.name) {
        this.$message.error('请输入创意名称');
        return;
      }
      
      if (!this.creativeForm.adGroupId) {
        this.$message.error('请选择所属广告组');
        return;
      }
      
      if (!this.creativeForm.type) {
        this.$message.error('请选择创意类型');
        return;
      }
      
      // 根据创意类型验证对应字段
      if (this.creativeForm.type === 'image') {
        if (!this.creativeForm.mainImageUrl) {
          this.$message.error('请上传主图');
          return;
        }
        if (!this.creativeForm.title) {
          this.$message.error('请输入创意标题');
          return;
        }
        if (!this.creativeForm.description) {
          this.$message.error('请输入创意描述');
          return;
        }
      } else if (this.creativeForm.type === 'video') {
        if (!this.creativeForm.videoUrl) {
          this.$message.error('请上传视频素材');
          return;
        }
        if (!this.creativeForm.coverImageUrl) {
          this.$message.error('请上传视频封面');
          return;
        }
      } else if (this.creativeForm.type === 'text') {
        if (!this.creativeForm.title) {
          this.$message.error('请输入广告标题');
          return;
        }
        if (!this.creativeForm.description) {
          this.$message.error('请输入广告描述');
          return;
        }
        if (!this.creativeForm.displayUrl) {
          this.$message.error('请输入显示URL');
          return;
        }
      }
      
      if (!this.creativeForm.bidAmount || this.creativeForm.bidAmount <= 0) {
        this.$message.error('请输入正确的出价金额');
        return;
      }
      
      if (!this.creativeForm.dailyBudget || this.creativeForm.dailyBudget < 100) {
        this.$message.error('每日预算不能低于100元');
        return;
      }
      
      if (!this.creativeForm.startDate) {
        this.$message.error('请选择开始日期');
        return;
      }
      
      // 提交表单
      console.log('提交创意表单:', this.creativeForm);
      
      // 模拟API请求
      this.$message.success('创意提交审核成功！');
      
      // 重置表单
      this.resetForm();
    },
    
    resetForm() {
      this.creativeForm = {
        name: '',
        adGroupId: '',
        type: '',
        landingPageType: '',
        title: '',
        description: '',
        mainImageUrl: '',
        videoUrl: '',
        coverImageUrl: '',
        displayUrl: '',
        bidAmount: 0.01,
        dailyBudget: 100,
        startDate: new Date().toISOString().split('T')[0],
        endDate: '',
      };
    }
  }
}
</script>

<style scoped>
/* 自定义样式 */
.upload-container {
  position: relative;
}

.upload-container input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
</style>    